<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>订单页面</title>
<link href="${pageContext.request.contextPath}/css/common.css"
	rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/cart.css"
	rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/product.css"
	rel="stylesheet" type="text/css" />
	
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	function checkDel() {
		return window.confirm("您确定要取消订单吗?");
	}
	function selDetails(oid){
		window.location.href = "${pageContext.request.contextPath}/orderDetails.action?oid="+oid;
	}
	//批量删除
	$(function(){
	    $("#deleteSkills").click(function(){
	        //判断是否至少选择一项
	        var checkedNum = $("input[name='ids']:checked").length;
	        if(checkedNum==0){
	            alert("请至少选择一项");
	            return;
	        }
	        if(confirm("确定要删除所选订单？")){
	            //这个数组存储要删除的数据的id
	            var checkedList = new Array();
	            //每一个被选中的name为ids的input标签
	            $("input[name='ids']:checked").each(function(){
	                checkedList.push($(this).val());//将id存入数组
	            });
	            $.ajax({
	                type:"post",
	                dataType:"json",
	                url:"${pageContext.request.contextPath}/deleteOrders.action",//不同页面只用更改action即可
	                async:true,
	                //数组的toString里的id是用","分隔开的，例如数组{"1","2","3"},同String后为"1,2,3"
	                data:{"deleteList":checkedList.toString()},
	                success:function(data){
	                    if(data==1){
	                        for(var i=0;i<checkedList.length;i++){
	                            $(".tr_"+checkedList[i]).remove();//ajax动态移除
	                        }
	                        alert("删除成功");
	                        window.location=" ${pageContext.request.contextPath}/myOrder.action?page=1";
	                    }else{
	                        alert("删除失败");
	                    }
	                },
	                error:function(){
	                    alert("error");
	                }
	             })
	         }
	     })
	              			
	})
</script>
</head>
<body>
	<div class="container header">
		<div class="span5">
			<div class="logo">
				<a href="${pageContext.request.contextPath}/index.action"> <img
					src="${pageContext.request.contextPath}/image/r___________renleipic_01/logo.gif"
					alt=""></a>
			</div>
		</div>
		<div class="span9">
			
		</div>
		<%@ include file="menu.jsp"%>
	</div>
	<div class="container cart">
		<div class="span24">
			
			<h1 align="center">我的订单</h1>
			<div align="right"><input id="deleteSkills" type="button" value="-批量删除-" 
			style="color:#fff;background-color: #1bb4d7;border-color: #2e6da4;width:110px;height:40px;"/></div>
			<table>
				<tbody>
				    <c:forEach items="${pageBean.list }" var="order">
						<tr class="tr_${order.oid }" >
							<th colspan="5"><input name="ids" value="${order.oid}" type="checkbox" />订单编号:<font color="red">${order.oid}</font>&nbsp;&nbsp;&nbsp;&nbsp; 
							订单金额:<font color="red">${order.money}</font>&nbsp;&nbsp;&nbsp;&nbsp;
								订单状态： 
									<c:if test="${order.state==0}">
										<a style="color: red;"
										href="${pageContext.request.contextPath}/payOrderAganin.action?oid=${order.oid}">付款</a>&nbsp;&nbsp;
										<a style="color: red;"
										href="${pageContext.request.contextPath}/delOrder.action?oid=${order.oid}"  onclick="return checkDel();">取消订单</a>
									</c:if> 
									<c:if test="${order.state==1}">
										已付款即将发货
									</c:if> 
									<c:if test="${order.state==2}">已发货，
									<a style="color: red;"
										href="${pageContext.request.contextPath}/updateState.action?oid=${order.oid}">确认收货</a>
									</c:if> 
									<c:if test="${order.state==3}">
										交易成功
									</c:if>
							</th>
						</tr>
						<tr class="tr_${order.oid }" onclick="selDetails(${order.oid})">
							<th>图片</th>
							<th>商品</th>
							<th>价格</th>
							<th>数量</th>
							<th>小计</th>
						</tr>
					<c:forEach items="${order.oiList}" var="orderItem">
							<tr class="tr_${order.oid }" onclick="selDetails(${order.oid})">   
								<td width="60"><img
									src="${pageContext.request.contextPath}/${orderItem.product.image}" />
								</td>
								<td>${orderItem.product.pname}</td>
								<td>${orderItem.product.shopPrice}</td>
								<td class="quantity" width="60">
									${orderItem.count}
								</td>
								<td width="140">
								    <span class="subtotal">
								    	￥ ${orderItem.subtotal}
									</span>
								</td>
							</tr>
						</c:forEach>
					</c:forEach>
					
					<tr>
						<th colspan="5">
							<div class="pagination">
								<span>第${pageBean.page}/${pageBean.totlePage}页</span>
								<c:if test="${pageBean.page!=1}">
									<a href="${ pageContext.request.contextPath }/myOrder.action?page=1" class="firstPage">&nbsp;</a>
									<a
										href="${ pageContext.request.contextPath }/myOrder.action?page=${pageBean.page-1}"
										class="previousPage">&nbsp;</a>
								</c:if>
								<c:forEach var="i" begin="1" end="${pageBean.totlePage}">
									<c:choose>
										<c:when test="${pageBean.page!=i}">
											<a
												href="${pageContext.request.contextPath }/myOrder.action?page=${i}">
												${i}
											</a>
										</c:when>
										<c:otherwise>
											<span class="currentPage">${i}</span>
										</c:otherwise>
									</c:choose>
								</c:forEach>
								<c:if test="${pageBean.page!=pageBean.totlePage}">
									<a class="nextPage"
										href="${ pageContext.request.contextPath }/myOrder.action?page=${pageBean.page+1}">&nbsp;</a>
									<a class="lastPage"
										href="${ pageContext.request.contextPath }/myOrder.action?page=${pageBean.totlePage}">&nbsp;</a>
								</c:if>
							</div>
						</th>
					</tr>
				</tbody>
			</table>
		</div>

	</div>
	<div class="container footer">
		<div class="span24">
			
		</div>
		<div class="span24">
			<ul class="bottomNav">
				<li><hr></hr></li>
			</ul>
		</div>
		<div class="span24">
			<div class="copyright">Copyright ©  网上商城 版权所有</div>
		</div>
	</div>
</body>
</html>